<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useUserInfoStore } from '@/stores/userInfo';

const userInfoStore = useUserInfoStore();

// 直接从 store 获取已经根据权限过滤好的菜单
const visibleMenus = computed(() => userInfoStore.visibleMenus);

const noChildren = computed(() => visibleMenus.value.filter(item => !item.children || item.children.length === 0));
const hasChildren = computed(() => visibleMenus.value.filter(item => item.children && item.children.length > 0));

const route = useRoute();
const activeMenu = computed(() => {
  const { path } = route;
  return path;
});
</script>

<template>
  <el-aside width="200px">
    <div class="el-aside__logo"></div>
    <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff"
             router :default-active="activeMenu">
      <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path">
        <component class="icons" :is="item.icon"></component>
        <span>{{ item.label }}</span>
      </el-menu-item>
      <el-sub-menu :index="item.label" v-for="item in hasChildren" :key="item.label">
        <template #title>
          <component class="icons" :is="item.icon"></component>
          <span>{{ item.label }}</span>
        </template>
        <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.path">
          <component class="icons" :is="subItem.icon"></component>
          <span>{{ subItem.label }}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<style scoped lang="scss">
.el-aside {
  background-color: #232323;

  &__logo {
    height: 150px;
    background: url('../assets/login_title222.png') no-repeat center / 160px auto;
  }

  .el-menu {
    border-right: none;
  }

  .icons {
    margin-right: 8px;
    width: 18px;
    height: 18px;
  }
}
</style>